<template>
	<view class="content">
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<scroll-view @scrolltolower="scrolltolower" scroll-y="true" class="scroll_view">
			<view v-for="item in scrollViewList" :key="item.id" style="border-bottom: 1px solid green;">
				<view>{{ item.cname }}:{{ item.skin_name }}</view>
			</view>
		</scroll-view>
		<swiper @change="swiperChange" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item item-id="1">
				<view class="swiper-item">123</view>
			</swiper-item>
			<swiper-item item-id="2">
				<view class="swiper-item">345</view>
			</swiper-item>
		</swiper>
		<uni-icons type="chatboxes-filled" size="26"></uni-icons>
		<button type="info" @click="goOther">go other button</button>
		<button type="info" @click="getData">getData button</button>
		<button type="info" @click="uploadImg">uploadImg button</button>
		<button type="info" @click="saveStorage">saveStorage button</button>
		<navigator open-type="navigate" url="/pages/other/other"> go other</navigator>
		<!-- #ifdef H5 -->
		<view class="">只能在 Html5 中显示</view>
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<view class="">除了 Html5 其它都显示</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello 123',
				scrollViewList: [],
				userInfo: {
					username: 'mk',
					age: 20
				}
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			scrolltolower(data) {
				console.log(data)
			},
			swiperChange(e) {
				// console.log(e.detail.currentItemId);	
			},
			getData() {
				// uni.request({
				// 	url:'https://study.duyiedu.com/api/herolist',
				// 	method:'GET',
				// 	success: res => {
				// 		if (res.data.code === 0) {
				// 			this.scrollViewList = res.data.data;						
				// 		}
				// 	}
				// })
				this.$http.beforeRequest = (options) => {
					console.log('请求前：');
					console.log(options);
				}
				this.$http.afterRequest = (res) => {
					console.log('请求结束：');
					console.log(res);
				}
				this.$http.get('https://study.duyiedu.com/api/herolist').then(res => {
						if (res.data.code === 0) {
							this.scrollViewList = res.data.data;						
						}
					})
			},
			uploadImg() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths
						uni.uploadFile({
							url: 'https://sgfxtvfp6.hn-bkt.clouddn.com', // 上传文件的地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'key': `${new Date()}.jpg`,
								token: ''
							},
							fail: (err) => {
								console.log(err);
							},
							success: (res) => {
								console.log(res);	
							}
						})
					}
				})
			},
			saveStorage() {
				uni.setStorage({
					data: this.userInfo,
					key: 'userInfo'
				}),
				uni.getStorage({
					key: 'userInfo',
					success: (res) => {
						console.log(res);
					}
				})
			},
			goOther() {
				uni.navigateTo({
					url: '/pages/other/other'
				})
			}
		}
	}
</script>

<style>

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.scroll_view {
		height: 200px;
	}
</style>
